<template>
    <!-- 不管页面还是组件最底层都是new Vue创建出来的 -->
    <!-- 创建 把this实例创建出
    挂载 把DOM页面载入页面
    更新 改变数据,视图刷新
    销毁 (实例/DOM标签)组件销毁/撤掉-->
    <div class="life">
        生命周期
        <button @click="num++">{{num}}</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                num:10
            }
        },
        //创建
        beforeCreate(){console.log('创建前')},
        created(){console.log('创建后！！！')},//可调用后端接口
        //挂载DOM 把标签插入页面
        beforeMount(){console.log('挂载前')},
        mounted(){console.log('挂载完成！！！');},//操作DOM：读取/获取：尺寸/位置/事件
        //更新
        beforeUpdate(){console.log('更新前');},
        updated(){console.log('更新后');},
        //销毁
        beforeDestroy(){console.log('销毁前！！！');},//销毁三方库/解绑自定义事件
        destroyed(){console.log('销毁后');}
    }
</script>

<style lang="sass" scoped>

</style>